<style>
    .fieldlist .selectpicker {
        width: 100% !important;
        left: 0 !important;
    }
    .fieldlist.table tr td{
        text-align: center;
        padding: 8px 2px;
    }
    .fieldlist.table tr{
        padding: 2px 0;
    }
    .table .td-img{
        display:flex;
        align-items: center;
        justify-content: center;
    }
    .td-img .image-thumb{
        margin-right: 5px;
        width:32px;
        height:32px;
        background-color: #ddd;
    }
    .td-img .image-thumb img{
        width:100%;
        height:100%;
    }

    .plupload-preview li,
    .faupload-preview li {
        margin-top: 0px;
        margin-bottom: 15px;
    }
</style>
<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-name" data-rule="required" placeholder="请输入分组名称" class="form-control" name="row[name]" type="text" value="{$row.name|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Icon')}:</label>
        <div class="col-xs-12 col-sm-8">
            <ul class="row list-inline faupload-preview" id="p-icon"></ul>
            <div class="input-group">
                <input id="c-icon" class="form-control" data-rule="" size="50" name="row[icon]" type="text" value="{$row.icon|htmlentities}">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-icon" class="btn btn-danger faupload"
                            data-input-id="c-icon" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
                            data-multiple="false" data-preview-id="p-icon"><i class="fa fa-upload"></i>
                        </button></span>
                    <span><button type="button" id="fachoose-icon" class="btn btn-primary fachoose"
                            data-input-id="c-icon" data-mimetype="image/*" data-multiple="false"> <i
                                class="fa fa-list"></i> </button></span>
                </div>
                <span class="msg-box n-right" for="c-icon"></span>
            </div>
        </div>
    </div>

    <div class="row">
        <label class="control-label col-xs-12 col-sm-2">{:__('标签设置')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="row">
                <div class="col-xs-12">
                    <table class="fieldlist table table-striped table-nowrap" id="label" data-template="label-tpl" data-tag="tr" data-name="row[label]">
                        <tr>
                            <td width="88">{:__('图标')}</td>
                            <td>{:__('名称')}</td>
                            <td width="88">{:__('操作')}</td>
                        </tr>
                        <tr>
                            <td colspan="2" align="left" style="text-align: left; ">
                                <textarea name="row[label]" class="form-control hide" cols="30" rows="6">{$row['label']}</textarea>
                            </td>
                            <td>
                                <a href="javascript:;" class="btn btn-sm btn-success btn-append">
                                    <i class="fa fa-plus"></i> {:__('Append')}
                                </a>
                            </td>
                        </tr>
                    </table>
                    <script id="label-tpl" type="text/html">
                        <tr class="form-group">
                            <td class="td-img">
                                <div class="image-thumb" id="p-image-<%=index%>" data-template="p-image-tpl">
                                    <img src="<%=row.image ? row.image : '__CDN__/assets/img/blank.gif'%>" />
                                </div>
                                <div class="input-group">
                                    <input type="hidden" id="c-image-<%=index%>" name="<%=name%>[<%=index%>][image]" class="form-control" value="<%=row.image%>"/>
                                    <div class="input-group-addon no-border no-padding">
                                        <span>
                                            <button type="button" id="faupload-image-<%=index%>" class="btn btn-danger faupload"
                                            data-input-id="c-image-<%=index%>" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp"
                                                data-multiple="false" data-preview-id="p-image-<%=index%>"><i class="fa fa-upload"></i></button></span>
                                        <span><button type="button" id="fachoose-image-<%=index%>" class="btn btn-primary fachoose"
                                                data-input-id="c-image-<%=index%>" data-mimetype="image/*" data-multiple="false"><i
                                                    class="fa fa-list"></i></button></span>
                                    </div>
                                    <span class="msg-box n-right" for="c-image-<%=index%>"></span>
                                 </div>
                            </td>
                            <td>
                                <input type="hidden" name="<%=name%>[<%=index%>][value]" class="form-control" value="<%=index%>" />
                                <input type="text" data-rule="required" name="<%=name%>[<%=index%>][name]" class="form-control" value="<%=row.name%>" placeholder="请输入选项名称" />
                            </td>
                            <td>
                                <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span>
                                <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>
                            </td>
                        </tr>
                    </script>
                    <script id="p-image-tpl" type="text/html">
                        <a href="<%=fullurl%>" data-url="<%=url%>" target="_blank" class="">
                            <img src="<%=fullurl%>"/>
                        </a>
                    </script>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Weigh')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-weigh" data-rule="required" class="form-control" name="row[weigh]" type="number" value="{$row.weigh|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="radio">
                {foreach name="statusList" item="vo"}
                <label for="row[status]-{$key}"><input id="row[status]-{$key}" name="row[status]" type="radio"
                        value="{$key}" {in name="key" value="$row.status" }checked{/in} /> {$vo}</label> {/foreach}
            </div>
        </div>
    </div>

    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>